<template>
  <div class="bottom_back">
    <el-row>
      <el-col :span="24">
        <div class="title_text colBlueTitle ft18">
          {{ year }} 星期{{ dateDay }} <span class="ml4">{{ mintime }}</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'BottomLine',
  data() {
    return {
      timer: null, // 定时器
      year: null, // 年份
      mintime: null, // 时间
      dateDay: null // 周期
    }
  },
  created() {
    clearInterval(this.timer)
    this.timer = setInterval(() => {
      this.getClock()
    }, 1000)
  },
  destroyed() {
    clearInterval(this.timer)
  },
  mounted() {
  },
  methods: {
    getClock() {
      function getWeek(date) {
        // 参数时间戳
        const week = this.$moment(date).day()
        switch (week) {
          case 1:
            return '一'
          case 2:
            return '二'
          case 3:
            return '三'
          case 4:
            return '四'
          case 5:
            return '五'
          case 6:
            return '六'
          case 0:
            return '日'
          default:
            return ''
        }
      }
      this.year = this.$moment().format('YYYY-MM-DD')
      this.mintime = this.$moment().format('HH:mm')
      const date = new Date().getTime()
      this.dateDay = getWeek.call(this, date)
    }
  }
}
</script>

<style lang="scss" scoped>
.bottom_back {
  background: url("~@/assets/head/bottomLine.png");
  background-size: 100% 100%;
  width: 100%;
  height: 58px;
  position: absolute;
  bottom: 0;
  left: 0
}
.top_border {
  width: 100%;
  height: 50px;
}
.title_left {
  width: 100%;
  height: 50px;
  margin-top: 26px;
}
//顶部左边装饰效果
.title_right {
  width: 100%;
  height: 50px;
  margin-top: 26px;
}
//顶部中间装饰效果
.title_center {
  width: 100%;
  height: 50px;
}
//顶部中间文字数据可视化系统
.title_text {
  text-align: center;
  // font-size: 25px;
  // margin-top: 24px;
  line-height: 58px;
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;;
  font-weight: bold;
  // text-shadow: 2px 4px 7px rgba(205, 206, 209, 0.5);
  z-index: 100;
}
</style>
